import React from 'react'
import './index.less'

// [
//   { courseType: 'all', name: '全部课程', active: true },
//   { courseType: 'english', name: '龙英语' },
//   { courseType: 'program', name: '龙编程' },
// ]

export default class Tabs extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { tabsData, changeTab, fontColor } = this.props

    return (
      <div className="tabs-container">
        <span className="title" style={fontColor && { color: fontColor }}>课程分类</span>
        <ul onClick={this.changeTab}>
          {
            tabsData.map((tab, index) => (
              <li
                key={tab.courseType}
                className={`${tab.active ? 'active' : ''}`}
                onClick={changeTab(index)}
                style={fontColor && { color: fontColor }}
              >{tab.name}</li>
            ))
          }
        </ul>
      </div>
    )
  }
}